<template>
	<div id="suggest_approve">
		<!--工具条-->
		<div name="searchColums">
			<el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
				<el-form-item class="el-form-item" label="类型">
          			<el-select size="small" v-model="filters.suggestType" clearable placeholder="请选择">
						<el-option v-for="item in suggestTypeOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="el-form-item" label="投诉建议事项">
          			<el-select size="small" v-model="filters.suggestItem" clearable placeholder="请选择">
						<el-option v-for="item in suggestItemOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="el-form-item" label="投诉建议时间">
					<el-date-picker v-model="filters.suggestTimeBegin" type="datetime" placeholder="选择日期时间"></el-date-picker>
				</el-form-item>
				<el-form-item class="el-form-item" label="至">
					<el-date-picker v-model="filters.suggestTimeEnd"  type="datetime" placeholder="选择日期时间"></el-date-picker>
				</el-form-item>
				<span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getDataGrid(true)">查询</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
			    	</el-form-item>
				</span>
			</el-form>
		</div>

		<!--列表-->
		<el-table :data="buildingDatas" id="dataGrid" empty-text=" " border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
			<el-table-column prop="ownerName" label="业主名称" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="communityName" label="小区名称" width="80" show-overflow-tooltip></el-table-column>
			<el-table-column prop="buildingName" label="楼宇名称" width="80" show-overflow-tooltip></el-table-column>
			<el-table-column prop="unitName" label="单元名称" width="80" show-overflow-tooltip></el-table-column>
			<el-table-column prop="houseName" label="房屋名称" width="80" show-overflow-tooltip></el-table-column>
			<el-table-column prop="suggestitemName" label="投诉建议事项" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="suggestTime" label="投诉建议时间" width="140" show-overflow-tooltip></el-table-column>
			<el-table-column prop="description" label="投诉建议内容" width="260" show-overflow-tooltip></el-table-column>
			<el-table-column prop="acceptTime" label="受理时间" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column prop="acceptUserName" label="受理人" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="resultDescription" label="回复内容" width="260" show-overflow-tooltip></el-table-column>
      <el-table-column prop="statusName" label="状态" width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="typeName" label="类型" width="80" show-overflow-tooltip></el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar" id="pageDiv">
			<el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
		</el-col>
	</div>
</template>
<script>
	import { getToken, setToken, removeToken } from '@/util/auth'
	import request from '@/router/axios'
	export default{
		name:'suggestApprove',
		data(){
			return{
                //单元过滤条件
                filters: {
                  suggestType: '',
                  suggestItem:'',
                    suggestTimeBegin:'',
                    suggestTimeEnd:''
                },
                url:{

                    //单元数据
                  list: "/admin/suggestHistory/page",
                    approve:'/admin/suggestRecord/approve',
                    submitSug:'/admin/suggestRecord/submitSug'

                },
                buildingDatas:[],
                suggestTypeOptions:[],
                suggestItemOptions:[],
                sort:{
                    sort:'sort',
                    order:'asc'
                },
                total: 0,
                page: 1,
                pageSize:10,
                listLoading:false,
                sels:[],
      }
		},
		methods: {
      //初始化数据字典
      initDictsData: function () {
        request.get("/admin/dict/type/suggest_type").then((res) => {
          if (res.status === 200) {
            this.suggestTypeOptions = res.data;
          }
        });
        request.get("/admin/dict/type/suggest_item").then((res) => {
          if (res.status === 200) {
            this.suggestItemOptions = res.data;
          }
        });

      },
			handleSortChange(sort){
                this.sort={
                    sort:sort.prop,
                    order:sort.order=='ascending'?'asc':'desc'
                };
                this.getDataGrid();
            },
            tableRowClassName(row, index) {
                //把每一行的索引放进row
                row.index = row.rowIndex
            },
            headStyle({ row, rowIndex }){
                return "table_head_style";
            },
            index_formatter:function(row, column ,cellValue,index) {
                //放回索引值
                return (this.pageSize * (this.page - 1)  + 1+ index);
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getDataGrid();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.page = 1;
                this.getDataGrid();
            },
            resetSearchForm(formName) {
              this.filters = {
                suggestTimeBegin: '',
                suggestTimeEnd: '',
                suggestType: ''
              }
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
      //获取单元列表数据
            getDataGrid(flag) {
            	if(flag){
      				this.page = 1;
      			}
                //获取当前树节点选中小区
                let para = {
                    params: {
                        page: this.page,
                        limit: this.pageSize,
                        //排序
                        orderByField:this.sort.sort,
                        isAsc:this.sort.order,
                      suggestTimeBegin: this.filters.suggestTimeBegin,
                      suggestTimeEnd: this.filters.suggestTimeEnd,
                      suggestType: this.filters.suggestType,
                      suggestItem: this.filters.suggestItem
                    }
                };
                this.listLoading = true;
                request.get(this.url.list,para).then((res) => {
                    this.total = res.data.total;
                    var datas=res.data.records;
                    this.buildingDatas = datas;
                    this.listLoading = false;
                });
            }
		},
		mounted() {
			this.getDataGrid();
      this.initDictsData();
		}
	}
</script>
